<template>
  <div id="homePage">
    <div class="searchBar">
      <a-input-search
        placeholder="请输入图片名称"
        v-model:value="searchParams.searchText"
        enter-button="搜索"
        size="large"
        @search="doSearch"
      >
      </a-input-search>
    </div>
    <div class="categoryBar">
      <a-tabs v-model:activeKey="selectCategory" @change="doSearch">
        <a-tab-pane key="all" tab="全部" />
        <a-tab-pane v-for="category in categoryList" :key="category" :tab="category">{{
          category
        }}</a-tab-pane>
      </a-tabs>
    </div>
    <div class="tagBar">
      <span style="margin-right: 8px">标签：</span>
      <a-space :size="[0, 8]" wrap>
        <a-checkable-tag
          v-for="(tag, index) in tagList"
          :key="tag"
          v-model:checked="selectedTagList[index]"
          @change="doSearch()"
          >{{ tag }}</a-checkable-tag
        >
      </a-space>
    </div>
    <div class="cardPictureList">
      <PictureList :dataList="dataList" :loading="loading" />
      <a-pagination
        v-model:current="searchParams.current"
        v-model:page-size="searchParams.pageSize"
        :total="total"
        style="text-align: right"
        @change="getPictureList"
      />
    </div>
  </div>
</template>

<script lang="ts" setup>
import {
  getTagCategoryUsingGet,
  listPictureVoPageWithCacheUsingPost,
} from '@/api/pictureController'
import PictureList from '@/components/PictureList.vue'
import { message } from 'ant-design-vue'
import { computed, onMounted, reactive, ref } from 'vue'
import { useRouter } from 'vue-router'

const router = useRouter()
const dataList = ref([])
const total = ref(0)
const loading = ref(true)
const categoryList = ref<string[]>([])
const tagList = ref<string[]>([])
const selectedTagList = ref<string[]>([])
const selectCategory = ref<string>('all')
const picture = ref<API.PictureVO>()
const props = defineProps<{
  id: number | string
}>()
//获取标签分类
const getTagCategoryData = async () => {
  const res = await getTagCategoryUsingGet()
  console.log('获取标签分类', res)
  if (res.data.code === 0) {
    categoryList.value = res.data.data?.categoryList ?? []
    tagList.value = res.data.data?.tagList ?? []
    selectedTagList.value = tagList.value.map(() => false)
  } else {
    message.error(res.data.message)
  }
}

//搜索条件
const searchParams = reactive<API.PictureQueryRequest>({
  current: 1,
  pageSize: 10,
  sortField: 'createTime',
  sortOrder: 'descend',
})

//分页参数
const pagination = computed(() => {
  return {
    current: searchParams.current,
    pageSize: searchParams.pageSize,
    total: total.value,
    onChange: (page: number, pageSize: number) => {
      searchParams.current = page
      searchParams.pageSize = pageSize
      getPictureList()
    },
  }
})

//获取图片列表
const getPictureList = async () => {
  loading.value = true
  const params = {
    ...searchParams,
    tags: [],
    category: undefined,
  }
  if (selectCategory.value !== 'all') {
    params.category = selectCategory.value
  }
  selectedTagList.value.forEach((useTag, index) => {
    if (useTag) {
      params.tags.push(tagList.value[index])
    }
  })
  const res = await listPictureVoPageWithCacheUsingPost(params)
  console.log('获取图片列表', res)
  if (res.data.code === 0) {
    dataList.value = res.data.data.records
    total.value = res.data.data.total
  } else {
    message.error(res.data.message)
  }
  loading.value = false
}

//跳转至图片详情
const doClcikPicture = (picture: API.PictureVO) => {
  router.push({
    path: `/picture/${picture.id}`,
  })
}

const doSearch = () => {
  searchParams.current = 1
  getPictureList()
}

onMounted(() => {
  getPictureList()
  getTagCategoryData()
})
</script>

<style lang="scss" scoped>
#homePage {
  .searchBar {
    max-width: 400px;
    margin: 0 auto 16px;
  }
  .tagBar {
    margin-bottom: 16px;
  }
}
</style>
